<template>

    <!-- 评价卡片容器 -->
    <div class="max-w-md md:max-w-lg mx-auto bg-white border border-neutral-200 rounded-lg p-6 shadow-sm ">
        <!-- 用户信息区域 -->
        <div class="flex items-center mb-5 border-b border-neutral-200 pb-12px">
            <!-- 用户头像 -->
            <v-avatar color="surface-variant" size="60" class="mr-4" :image="data?.fileList?.[0]"></v-avatar>

            <!-- 用户详情 -->
            <div>
                <h3 class="font-semibold text-lg mb-1">{{ data?.name }}</h3>
                <p class="text-neutral-500 text-sm flex items-center">
                    <i class="fa fa-map-marker mr-1.5"></i> 1 review
                    <i class="fa fa-flag ml-2 mr-1.5"></i> {{ data?.country }}
                </p>
            </div>
        </div>

        <!-- 评分和日期 -->
        <div class="flex justify-between items-center mb-4">
            <!-- 星级评分 -->
            <div class="flex">
                <Start />
            </div>

            <!-- 评价日期 -->
            <span class="text-neutral-500 text-sm">
                {{ getclip(data?.date) }}
            </span>
        </div>

        <!-- 评价标题 -->
        <h2 class="text-lg mb-3">
            {{ getclip(data?.title) }}
        </h2>

        <!-- 评价内容 -->
        <p class="text-neutral-600 text-[14px] leading-relaxed">
            {{ getclip(data?.describeribe) }}
        </p>

        <!-- 元信息标签 -->
        <div class="flex flex-wrap gap-3 mb-6" v-if="false">
            <span class="bg-neutral-200 text-neutral-600 text-xs px-3 py-1.5 rounded">October 29, 2020</span>
            <span class="bg-neutral-200 text-neutral-600 text-xs px-3 py-1.5 rounded">Unprompted review</span>
        </div>

        <!-- 操作按钮 -->
        <div class="flex items-center gap-6 pt-4 border-t border-neutral-200" v-if="false">
            <button class="flex items-center text-neutral-600 text-sm hover:text-primary transition-colors">
                <span class="mr-1">
                    <svg aria-hidden="true" viewBox="0 0 16 16" fill="inherit"
                        class="CDS_Icon_icon__c30ce7 CDS_Icon_inherit__c30ce7" xmlns="http://www.w3.org/2000/svg"
                        width="14px" height="14px" role="img">
                        <path fill-rule="evenodd" clip-rule="evenodd"
                            d="M7.94.94A1.5 1.5 0 0 1 10.5 2a20.774 20.774 0 0 1-.384 4H14.5A1.5 1.5 0 0 1 16 7.5v.066l-1.845 6.9-.094.095A1.5 1.5 0 0 1 13 15H9c-.32 0-.685-.078-1.038-.174-.357-.097-.743-.226-1.112-.349l-.008-.003c-.378-.126-.74-.246-1.067-.335C5.44 14.047 5.18 14 5 14v.941l-5 .625V6h5v.788c.913-.4 1.524-1.357 1.926-2.418A10.169 10.169 0 0 0 7.5 1.973 1.5 1.5 0 0 1 7.94.939ZM8 2l.498.045v.006l-.002.013a4.507 4.507 0 0 1-.026.217 11.166 11.166 0 0 1-.609 2.443C7.396 5.951 6.541 7.404 5 7.851V13c.32 0 .685.078 1.038.174.357.097.743.226 1.112.349l.008.003c.378.126.74.246 1.067.335.335.092.594.139.775.139h4a.5.5 0 0 0 .265-.076l1.732-6.479A.5.5 0 0 0 14.5 7H8.874l.138-.61c.326-1.44.49-2.913.488-4.39a.5.5 0 0 0-1 0v.023l-.002.022L8 2ZM4 7H1v7.434l3-.375V7Zm-1.5 5.75a.25.25 0 1 0 0-.5.25.25 0 0 0 0 .5Zm-.75-.25a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0Z">
                        </path>
                    </svg>
                </span>
                Useful
            </button>
            <button class="flex items-center text-neutral-600 text-sm hover:text-primary transition-colors">
                <span class="mr-1">
                    <svg aria-hidden="true" viewBox="0 0 16 16" fill="inherit" class="CDS_Icon_icon__c30ce7"
                        xmlns="http://www.w3.org/2000/svg" width="14px" height="14px" role="img"
                        style="fill: currentcolor;">
                        <path fill-rule="evenodd" clip-rule="evenodd"
                            d="M13 1a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-3 2a3 3 0 1 1 .583 1.778L5.867 7.115a3 3 0 0 1 0 1.77l4.716 2.337a3 3 0 1 1-.45.893L5.417 9.778a3 3 0 1 1 0-3.556l4.716-2.337A3.002 3.002 0 0 1 10 3ZM1 8a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm10 5a2 2 0 1 1 4 0 2 2 0 0 1-4 0Z">
                        </path>
                    </svg>
                </span>
                Share
            </button>
            <button class="ml-auto text-neutral-600 hover:text-primary transition-colors">
                <i class="fa fa-ellipsis-h"></i>
            </button>
        </div>
    </div>
</template>

<script setup lang="ts">
defineProps<{
    data?: any
}>()
import { Start } from '../start';
const getclip = (text: string, num: number = 305) => {
    return text?.slice?.(0, num) + ((text?.length > num) ? '...' : '');
}
</script>
